<template>
	
	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar :navTitle="navTitle" :isTitleStyle="true"></CustomNavbar>
	
	<view class="wrap container">
		<view class="top"></view>
		<uni-section class="container">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="productGategoryForm">
				
				<uni-forms-item label="数据ID" required name="id">
					<uni-easyinput v-model="productGategoryForm.id" placeholder="请输入标题" disabled=""/>
				</uni-forms-item>
				
				<uni-forms-item label="标题" required name="title">
					<uni-easyinput v-model="productGategoryForm.title" placeholder="请输入标题" />
				</uni-forms-item>
				
				<uni-forms-item label="父级" name="pid">
			
					<uni-data-picker placeholder="请选择父级" popup-title="请选择父级" 
						:localdata="productGategoryList" 
						v-model="productGategoryForm.pid"
					>
					</uni-data-picker>
					
				</uni-forms-item>
				
				<uni-forms-item label="排序" name="sort">
					<uni-easyinput v-model="productGategoryForm.sort" placeholder="请输入排序" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" class="mt20 u-primary">提交</button>
			<button type="default" @click="handleReset('valiForm')" class="mt20">重置</button>
		</uni-section>
	</view>
	
</template>

<script>
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import { productApi } from '@/utils/api.js'
		
	export default {
		data() {
			return {
				//标题
				navTitle: '',
				//表单数据
				productGategoryForm: {
					id: '',
					title: '',
					pid: '',
					sort: '999',
				},
				//校验规则
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					sort: {
						rules: [{
							format: 'number',
							errorMessage: '排序只能为数字'
						}]
					},
				},
				//树形数据
				productGategoryList: [
					// {
					// 	label: '电子数码',
					// 	value: 1,
					// 	disabled: 1,
					// 	children: [
					// 		{
					// 			label: '手机',
					// 			value: 2,
					// 			disabled: 1,
					// 			children: [
					// 				{
					// 					label: '魅族',
					// 					value: 3,
					// 					disabled: 1,
					// 				}
					// 			]
					// 		},
					// 	]
					// },
					// 	text: '电子数码',
					// 	value: 1,
					// 	disabled: 1,
					// 	children: [
					// 		{
					// 			text: '手机',
					// 			value: 2,
					// 			disabled: 1,
					// 			children: [
					// 				{
					// 					text: '魅族',
					// 					value: 3,
					// 					disabled: 1,
					// 				}
					// 			]
					// 		},
					// 	]
					// },
				],
			}
		},
		components: {
			CustomNavbar
		},
		onLoad(options) {
			this.navTitle = options.navTitle
			productApi.getProductGategoryList().then(res=>{
				if (res) {
					this.productGategoryList = res.data;
					if (options.id) {
						//赋值数据【编辑】
						this.filterTree(this.productGategoryList, options.id);
					} else if (options.pid){//添加子级情况
						this.productGategoryForm.pid = Number(options.pid)
						console.log(this.productGategoryForm)
					}
				}
			})
		},
		onReady() {
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					productApi.updateProductGategory(this.productGategoryForm).then(res=>{
						if (res) {
							uni.showToast({
							    title: res.msg,
							    icon: 'success',
							    duration: 500
							});
							setTimeout(function () {
								uni.navigateTo({
									url: '/pages/product/gategory/index'
								})
							},200)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			filterTree (tree, id) {
				if (!tree.length) return []
				for (let item of tree) {
					if (item.id == id) {
						delete item.children //删除子级属性【否则后台添加报错】
						delete item.label //删除子级属性【否则后台添加报错】
						delete item.text //删除子级属性【否则后台添加报错】
						delete item.value //删除子级属性【否则后台添加报错】
						this.productGategoryForm = item;
						// return item; //todo 处理返回undifine问题
					}
					if (item.children && item.children.length) {
						this.filterTree(item.children, id)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}
	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}
	 .popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
	 .popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>

